<template>
	
	<view class="content-box">
		<u-search :focus="true" @custom="SearchClick" @focus="SEARCHFOCUS" @search="SearchClick" placeholder="请输入关键字" @change="SEARCHCHANGE" v-model="searchresult"></u-search>
		
		<!-- 搜索历史 -->
		<view class="searchhistory" v-if="searchflag">
			<view class="top">
				<view class="left">
					搜索历史
				</view>
				<view v-if="!closeable" class="right" @click="DELSEARCHHISTORY">
					<u-icon name="trash" size="18"></u-icon>
				</view>
				<view v-else-if="closeable" class="right mm">
					<text class="del" @click="DELALLSEARCHHISTORY">全部删除</text> | <text class="ok"  @click="DELSEARCHHISTORY">完成</text>
				</view>
			</view>
			<view class="content">
				<u-tag :closable="closeable" v-for="(item,index) in searchHistory" :key="index" class="tag" :borderColor="'rgb(242, 242, 242)'" @click="searchhistoryclick(item)" :bgColor="'rgb(242, 242, 242)'" :color="'#000000'" :text="item" @close="CLOSECLICK(index)" plain shape="circle"> </u-tag>
			</view>	
		</view>
		
		
		<!-- 搜索提示 -->
		<view class="searchtip" v-else-if="!searchresultflag">
			<u-list
						@scrolltolower="scrolltolower"
					>
						<u-list-item
							v-for="(item, index) in searchtip"
							:key="index"	
						>
							<u-cell
							@click="GOTOGOODSDETAIL(item)"
								:title="`${item.introduce.slice(0,40)}`">
							</u-cell>
						</u-list-item>
					</u-list>
			
		</view>
		
		<view class="search_result" v-else>
			
			<list>
			    <!-- 注意事项: 不能使用 index 作为 key 的唯一标识 -->
			    <view class="item" v-for="(item, index) in searchdata" :key="index" @click="GOTOGOODSDETAIL(item)">
				
					<view class="item-left">
							<u-avatar :src="item.img[0]" :size="120" shape="square"></u-avatar>
					</view>
					<view class="item_right">
						<view class="head_item">
							{{item.introduce}}
						</view>
						<view class="item_price">
							￥<text class="m">{{parseInt(item.price).toFixed(2)}}</text>
						</view>
						<u-avatar :src="item.avatar" :size="40" shape="circle"></u-avatar>
					</view>
			    </view>
			  </list>
			
		</view>
		
		
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex'
	export default {
		data() {
			return {
				searchresult: '',         // 搜索内容
				searchlist: [],           // 搜索历史
				closeable: false,          // 搜索历史标签控制器
				searchflag: true,        // 搜索历史控制器
				searchdata: [],          // 搜索成功后面返回的商品数据
				searchtip: [],           // 搜索提示
				searchresultflag: false,  // 搜索结果控制器
				filepath: 'https://abc.apricity.asia/public/info/'
			};
		},
		computed: {
			...mapState(['searchHistory'])
		},
		methods: {
			...mapMutations(['changeSearchHistory','closeAllSearchHistory','closeOneSearchHistory']),
			/*
				搜索结果向下滚动
			*/
		   SCROLLSEARCH () {
			   console.log('滚动')
		   },
			/*
				搜索获得焦点
			*/
		   SEARCHFOCUS () {
			   this.searchresultflag = false
		   },
			/*
				点击搜索内容提示
			*/
		   GOTOGOODSDETAIL (item) {
			uni.navigateTo({
				url: '/shop/shopDetail/shopDetail?searchShop=' + JSON.stringify(item)
			})
		   },
			/*
				搜索内容提示发送变化，用户向下拉
			*/
		   scrolltolower () {
			   
		   },
		   /*
				获取搜索提示内容
		   */
			getSearchTipFun () {
				let _this = this
				uni.request({
					url: `https://www.apricity.asia:8911/shop/searchshop/${_this.searchresult}`,
									header: {
										Authorization: uni.getStorageSync('token') || ''
									},
									method: 'GET',
									success(e) {
										if (e.data.status !== 0) return uni.showToast({
											icon: 'none',
											title: e.data.message,
											duration: 2000
										})				
										_this.searchtip = e.data.data
									},
									complete() {
										_this.searchflag = false
									}
				})
			},
			/*
				搜索内容发生变化
			*/
		   SEARCHCHANGE () {
			 if (this.searchresult.length === 0) return this.searchflag = true
			 let immediate = true
			 uni.$u.debounce(this.getSearchTipFun, 500,immediate)

		   },
			/*
				删除全部的搜索历史
			*/
		   DELALLSEARCHHISTORY () {
			 this.closeAllSearchHistory()
		   },
			/*
				点击删除搜索历史
			*/
		   CLOSECLICK (index) {
			   this.closeOneSearchHistory(index)
		   },
			/*
				点击搜索按钮
			*/
		   async SearchClick () {
			   if (this.searchresultflag) return
			   this.changeSearchHistory(this.searchresult)
			   const {data: res} = await uni.$http.get(`/shop/searchshop/${this.searchresult}`)
			   if (res.status !== 0) return uni.showToast({
			   	icon: 'none',
				title: res.message,
				duration: 2000
			   })
			   this.searchdata = res.data
			   this.searchflag = false
			   this.searchresultflag = true
		   },
		   /*
				删除搜索历史
		   */
		  DELSEARCHHISTORY () {
			  this.closeable = !this.closeable
		  },
		  /*
			点击搜索历史
		  */
		 searchhistoryclick (item) {
			 this.searchresult = item
			 this.SearchClick()
		 }
		}
	}
</script>

<style lang="scss">
	.content-box {
		padding: 5px;
	}
	.m {
		font-size: 20px;
	}
	.iten-left {
		width: 40%;
	}
	.item_right {
		width: 60%;
		margin-left: 10px;
		.head_item {
			padding-right: 5px;
			width: 100%;
			margin-top: 5px;
			margin-bottom: 5px;
			font-size: 18px;
			font-weight: bold;
			color: #000000;
			 overflow:hidden;
			text-overflow:ellipsis;
			white-space:nowrap;
		}
		.item_price {
			color: #C00000;
			margin-top: 10px;
			margin-bottom: 10px;
		}
	}
	.item {
		margin-top: 20px;
		display: flex;
		align-items: left;
		justify-content: space-around;
	}
	.search_result {
		background-color: #FFFFFF;
		padding: 10px 10px;
	}
	.del {
		margin-right: 5px;
	}
	.ok {
		margin-left: 5px;
		color: #C00000;
	}
	.mm {
		font-size: 14px;
		color: #000000;
	}
	.head {
		height: 36px;
		width: 100%;
		background-color: #FFFFFF;
	}
	.uni-navbar__header-btns-left {
		width: 35px !important;
	}
	.search_text {
		font-size: 14px;
	}
	.searchhistory {
			border-bottom-right-radius: 10px;
			border-bottom-left-radius: 10px;
			box-shadow: 1px 1px 1px 1px #FFFFFF;
			background-color: #FFFFFF;
			padding: 20px 15px;
		.top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			.left {
				font-weight: 700;
				font-size: 16px;
			}
			.right {
				
			}
		}	
		.content {
			margin-top: 10px;
			display: flex;
			flex-wrap: wrap;
			.tag {
				margin-right: 10px;
				margin-top: 10px;
				
			}
		}
	}
	.searchtip {
		background-color: #FFFFFF;
		font-size: 12px;
		color: #000000;
	}
</style>

